<template>
    <div class="main">
      <mt-header title="">
        <router-link to="/selectType" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <div  :style="{backgroundImage:'url('+fontImage+')',backgroundSize:'100% 100%',}" class="image">
      </div>
      <div class="bottom">
        <mt-button class="makerFont" type="default" size="small" v-on:click="showModal">标注字体</mt-button>
        <mt-button class="next" type="default" size="small" v-on:click="nextImage">下一个</mt-button>
      </div>
    </div>
</template>
<script>
    export default {
      name: "makeFont",
      data () {
        return {
          title:'',
          count:0,        //第几个图
          fontValue:"无",   //标注的内容
          fontImage:"",   //获取的一个图片的url
          annotatedData:[],  //字体标注内容
          id:'',
          firstNotAnnotated:0,
          preSaveTime: new Date().getTime()
        }
      },
       mounted(){
         this.checkUserImage()
       },
      methods:{
        showModal:function(){
          this.$messagebox.prompt('请输入标注内容').then(({ value, action,title }) => {
            if(value===null){
              this.fontValue='无'
            }else{
              this.fontValue=value
            }
            this.saveAndNextImage()
          },() => {

          });
        },
        theNextImage:function(){
          this.jumpTONextImage(this.fontValue)
        },
        nextImage(){
          if(this.check_sign_time()){   //判断是否超过了2s
            this.theNextImage();
            this.updatePreSaveTime()
          }else{
            this.$messagebox.confirm('是否要标注下一个?').then(action => {
              this.theNextImage();
              this.updatePreSaveTime()
            },() => {
            });
          }
        },
        saveAndNextImage(){
          this.jumpTONextImage(this.fontValue);
        },
        jumpTONextImage:function(fontValue){
          if(fontValue==="无"){
            var todo = AV.Object.createWithoutData('Label',this.id);
            todo.set('isFinished',true);
            todo.save().then(()=>{
              this.checkUserImage();
            },function(){

            });
          }else{
            var todo = AV.Object.createWithoutData('Label',this.id);
            todo.set('isFinished',true);
            todo.set('lableData',fontValue);
            todo.save().then(()=>{
              this.checkUserImage();
            },function(){

            });
          }
          this.fontValue='无'
        },
        check_sign_time:function(){
          var currentTime=new Date().getTime();
          var intervalTime = currentTime - this.preSaveTime;
          return intervalTime >= 2000
        },
        updatePreSaveTime(){
          this.preSaveTime = new Date().getTime()
        },
        // 调用云函数获取下一张图片
        // checkUserImage检测上次是否有未标注完成的图片
        checkUserImage(){
          var self=this;
          var  optionId= this.$route.params.id
          if(optionId!=='未分类'){
            var query=new AV.Query('AppCategory');
            query.equalTo('objectId',optionId);
            query.find().then(function(result){
              const options={'category':(result[0].attributes).appCategory};
              AV.Cloud.run('checkUserImage2', options).then(function(result){
                  if(result.status===202){
                    //没有未完成标注
                    AV.Cloud.run('getImageData2', options).then(function(result){
                      self.id=result.data.labelId;
                      self.fontImage=result.data.imageUrl;
                    })
                  }else{
                    self.fontImage=result.data[0].imageUrl;
                    self.id=result.data[0].labelId
                  }
                },function(error){

                }
              )
            })
          }else{
            var options={category:'未分类'}
            AV.Cloud.run('checkUserImage2', options).then(function(result){
                if(result.status===202){
                  //没有未完成标注
                  AV.Cloud.run('getImageData2', options).then(function(result){
                    self.id=result.data.labelId;
                    self.fontImage=result.data.imageUrl;
                  })
                }else{
                  self.fontImage=result.data[0].imageUrl;
                  self.id=result.data[0].labelId
                }
              },function(error){

              }
            )
          }

        }
      },
      messageInfo:function (message) {
            this.$toast({
              message: message,
              position: 'top',
              duration: 5000
            });
      }

    }
</script>
<style scoped>
  p{
    color: #ffffff;
    margin-top: 20%;
    text-align: center;
  }
  .image{
    position: absolute;
    width: 100%;
    height: 87%;
  }
  .main{
    width: 100%;
    height: 100%;
  }
  *{
    color: #000000;
  }
  .bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 13%;
    background-color: #ffffff;
  }
  .makerFont{
    margin-top: 4%;
    margin-left: 3%;
    width: 40%;
    height: 60%;
    border: 1px solid #B9B9B9;
  }
  .next{
    margin-left:14%;
    margin-top: 20px;
    width: 40%;
    height: 60%;
    border: 1px solid #B9B9B9;
  }
</style>
